<template>
  <template v-if="!root.children?.length">
    <el-menu-item :route="{name:root.name}" :index="root.name">
      <template v-if="root.meta.iconClass">
        <i :class="root.meta.iconClass"></i>
      </template>
      <span>{{root.meta.title??root.name}}</span>
    </el-menu-item>
  </template>
  <template v-else-if="root.meta.isGroup">
    <el-submenu :index="root.name">
      <template #title>
        <template v-if="root.meta.iconClass">
          <i :class="root.meta.iconClass"></i>
        </template>
        <span>{{root.meta.title??root.name}}</span>
      </template>
      <template v-for="(cRoot,idx) in root.children" :key="idx">
        <menu-generator :root="cRoot" :deep="deep+1"  ></menu-generator>
      </template>
    </el-submenu>
  </template>
  <template v-else>
    <menu-generator v-for="(child,idx) in root.children" :key="idx" :deep="deep+1" :root="child">

    </menu-generator>
  </template>
</template>

<script lang="ts">
import {defineComponent, PropType,ref,unref} from 'vue'
import {RouteRecordRaw} from "vue-router";
interface CompProps {
  root:RouteRecordRaw
  /***
   * 当前遍历深度
   */
  deep:number
}

/***
 * 遍历Route生成menu菜单
 * @author Tantsz
 */
export default defineComponent({
  name:"menu-generator",
  props:{
    root:{
      type:Object as PropType<RouteRecordRaw>,
      required:true
    },
    deep:{
      type:Number,
      default:0,
    }
  },
  setup(p,c){
    const refProps = ref<CompProps>(p)
    return {
      refProps
    }
  }
})

</script>

<style scoped>

</style>
